<template>
	<el-card class="info-card">
		<div slot="header" class="card-header">
			<span>基本信息</span>
			<div class="card-header-btn">
				<el-button type="text" size="mini" @click="handleSave">保存</el-button>
			</div>
		</div>
		<div class="info-body">
			<div class="pic-module">
				<pic-upload-module :picInfo="picInfo" :action="['upload']" @imgUrl="handleImageUrl"></pic-upload-module>
			</div>
			<div class="form-module">
				<el-form ref="form" :rules="formRules" :model="form" label-position="top" label-width="110px" size="mini">
					<el-form-item prop="pageId">
						<span slot="label">
							{{pageNameType + '标识'}}
							<el-tooltip content="标识规则：只能以字母开头，内容只能是字母，数字,下划线，长度在6~255位之间" placement="top">
								<i class="el-icon-question"></i>
							</el-tooltip>
						</span>
						<el-input v-model="form.pageId" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="pageNameType + '名称'" prop="pageName">
						<el-input v-model="form.pageName"></el-input>
					</el-form-item>
					<el-form-item :label="pageNameType + '类型'" prop="subType">
						<el-select v-model="form.subType" placeholder="请选择">
							<el-option
								v-for="item in dicList"
								:key="item.dicCode"
								:label="item.dicValue"
								:value="item.dicCode">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="URL" v-if="actionType===1" prop="pageUrl">
						<el-input v-model="form.pageUrl"></el-input>
					</el-form-item>
					<el-form-item label="说明">
						<el-input type="textarea" v-model="form.extMessage"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</el-card>
</template>

<script>
	import { mapState, mapMutations, mapActions } from "vuex";

	export default {
		name: "buryInfo",
		data() {
			return {
				requirementId: null,
				pageDbId: null,
				actionType: "page",
				operateType: "",
				disabled: false,
				// 基本信息
				form: {
					// type: [], // 内置埋点
				},
				// 图片保存
				imageUrl: "",
				// 图片显示
				picInfo: {
					url: "",
					iconPosition: [],
				},
				formRules: {
					pageId: [
						{required: true, message: '请填写标识', trigger: 'blur'},
					],
					pageName: [
						{required: true, message: '请填写名称', trigger: 'blur'},
					],
					subType: [
						{required: true, message: '请选择类型', trigger: 'change'},
					],
					pageUrl: []
				},
				pageNameType: "",
				blockTypeList: [
					{
						value: 1,
						label: "导航菜单"
					}
				],
				boothTypeList: [
					{
						value: 1,
						label: "按钮"
					}
				],
				eventType: {
					page: [
						{
							value: 1,
							label: "页面浏览"
						},
						{
							value: 2,
							label: "页面停留"
						}
					],
					block: [
						{
							value: 1,
							label: "滑动"
						},
						{
							value: 2,
							label: "曝光"
						},
						{
							value: 3,
							label: "区块浏览"
						}
					],
					booth: [
						{
							value: 1,
							label: "点击"
						},
						{
							value: 2,
							label: "曝光"
						},
					]
				}
			}
		},
		components: {},
		created() {
		},
		mounted() {
		},
		props: {
			//    id：页面/区块/展位id
			//    类型：页面/区块/展位
			//    添加/编辑
			infoProps: {
				type: Object,
				default() {
					return {
						id: null,
						actionType: 1,
						operateType: "add",
						url: null
					}
				}
			}
		},
		computed: {
			...mapState({
				dicList: state => state.publicData.dicList
			})
		},
		watch: {
			infoProps: {
				handler(val) {
					console.log(val);
					this.operateType = val.operateType;
					this.actionType = val.actionType;
					this.pageDbId = val.pageDbId ? Number(val.pageDbId) : null;
					this.requirementId = val.requirementId;
					let pageNameType;
					let data = {};
					if (val.actionType === 1) {
						pageNameType = "页面";
						data.dicType = 1;
					} else if (val.actionType === 2) {
						pageNameType = "区块";
						data.dicType = 3;
					} else if (val.actionType === 3) {
						pageNameType = "展位";
						data.dicType = 4;
					}
					this.getDicList(data);
					if (val.sdkType == 3) {
						this.formRules.pageUrl = [
							{required: true, message: '请填写URL', trigger: 'blur'},
						]
					} else {
						this.formRules.pageUrl = []
					}
					this.pageNameType = pageNameType;
					if (this.$refs["form"]) {
						this.$refs["form"].resetFields();
					}
					if (val.operateType === "edit") {
						this.disabled = true;
						this.picInfo.iconPosition = [];
						this.handleQueryPage();
					} else {
						this.disabled = false;
						this.form = {};
						this.picInfo = {
							url: val.url,
							iconPosition: val.iconPosition || []
						}
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			...mapMutations([
				"SET_IMAGE_URL"
			]),
			...mapActions([
				"getDicList"
			]),
			// 查询基本信息：根据id
			async handleQueryPage() {
				let res = await this.$pageApi.pageQuery({
					id: this.pageDbId
				});
				if (res) {
					this.imageUrl = res.value.imageUrl;
					this.SET_IMAGE_URL(this.imageUrl);
					this.picInfo = {
						url: res.value.imageUrl,
						iconPosition: res.value.iconPosition || []
					}
					this.form = res.value;
				}
			},
			// 获取imageUrl
			handleImageUrl(val) {
				this.imageUrl = val;
				this.SET_IMAGE_URL(this.imageUrl);	// 添加、修改埋点时显示图片
				this.picInfo.url = val;
				this.picInfo.iconPosition = [];
			},
			// 保存：新增、修改
			handleSave() {
				this.$refs["form"].validate((valid) => {
					if (valid) {
						this.handlePageSave();
					} else {
						return false;
					}
				})
			},
			async handlePageSave() {
				let data = Object.assign({}, this.form);
				let pageType = Number(this.actionType);
				data.pageType = pageType;
				data.imageUrl = this.imageUrl;
				data.requirementId = this.requirementId;
				data.iconPosition = this.picInfo.iconPosition;
				let res;
				if (this.infoProps.operateType === "add") {
					data.parentId = this.pageDbId;
					res = await this.$pageApi.pageAdd(data);
				} else {
					data.id = this.infoProps.pageDbId;
					res = await this.$pageApi.pageUpdate(data);
				}
				if (res) {
					this.$emit("savePage", true);
					this.$message({
						type: "success",
						message: "保存成功"
					});
				}
			}
		},

	}
</script>

<style scoped lang="scss">
	.info-card {
		.info-body {
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;

			.pic-module {
				width: 30%;
			}

			.form-module {
				padding-left: 20px;
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				flex-grow: 1;

				.el-form {
					.el-form-item {
						.el-form-item__content {
							& > .el-input, .el-select {
								width: 50%;
							}
						}
					}
				}
			}
		}
	}
</style>
